/* ROOT VARIABLES */
:root {
    --site-font: "Proxima Nova";
    --site-font-fallback: monospace;
    /* --text-color: rgb(230, 230, 230);
    --background-color: rgb(15, 15, 15); */
    --link-color-visit: rgb(192, 192, 192);
    --link-color-hover: rgb(160, 160, 160);
    --text-color: rgb(20,20,20);
    --background-color: rgb(240,240,240);
    --text-size-small: 1.77vw;
    --text-size-normal: 2vw;
    --text-size-medium: 7vw;
    --text-size-large: 12vw;
    --text-weight-light: 100;
    --text-weight-normal: 200;
    --text-weight-heavy: 500;
    --default-line-height: 1.3;
    --img-margin: vw;
    --img-border-radius: 10%;
    --img-border: 30%, vw;
    --img-width: vw;
    --img-height: auto;
    --img-padding: none;
    --flex-height-default: 100vh;
    --flex-width-default: 100vw;
}

/* GLOBAL PROPERTIES */
* {
    color: var(--text-color);
    /* font-family: var(--site-font), var(--site-font-fallback); */
}

    /* ANIMATION PROPERTIES */
    @keyframes fadeIn {
        0% { opacity: 0; }
        100% { opacity: 1; }
    }

    @keyframes tilt-shaking {
        0% { transform: rotate(0deg); }
        10% { transform: translateY(-0.5vw); }
        25% { transform: rotate(2deg); }
        50% { transform: rotate(0deg); }
        75% { transform: rotate(-2deg); }
        100% { transform: rotate(0deg); }
    }

    /* IMAGE PROPERTIES */
    img {
        /* margin: var(--img-margin); */
        border-radius: var(--img-border-radius);
        /* border: var(--img-border); */
        /* width: var(--img-width); */
        /* height: var(--img-height); */
        /* padding: var(--img-padding); */
    }

    /* BODY PROPERTIES */
    body {
        font-family: "Proxima Nova", var(--site-font), var(--site-font-fallback);
        display: flex;
        flex-wrap: wrap;
        flex-direction: column;
        justify-content: space-around;
        margin: 0;
        background-color: var(--background-color);
    }

    header {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-content: center;
        height: var(--flex-height-default);
        width: var(--flex-width-default);
    }

    footer {
        font-family: "Batuphat Script";
        position: fixed;
        opacity: 0.34;
        bottom: 1vw;
        right: 2vw;
        height: 2.22vw;
        font-weight: var(--text-weight-light);
        font-size: 2vw;
        line-height: var(--default-line-height);
    }

    .title {
        font-family: "Batuphat Script";
        animation: tilt-shaking 0.25s;
        /* display: flex;
        flex-direction: column;
        justify-content: center;
        align-content: center; */
        text-align: center;
        /* background-image: url("/Users/AustinStawowczyk/Documents/GitHub/Tired.com/photos/edits/IMG_6662 copy.png"); */
        background-position: center 43%;
    }

    .list{
        display: flex;
        flex-flow: column;
        margin: 0 7vw 4vw;
    }

    .block {
        display: flex;
        flex-direction: column;
        flex-wrap: nowrap;
        justify-content: center;
        align-content: center;
        text-align: justify;
    }

    .section {
        /* display: flex;
        flex-direction: column;
        justify-content: center;
        align-content: center;
        width: 100vw;
        height: 100vh; */
    }

    .banner1 {
        font-family: "Batuphat Script";
        text-align: center;
        padding-top: 2vw;
        /* background-image: url("/Users/AustinStawowczyk/Documents/GitHub/Tired.com/photos/edits/IMG_6666 copy.jpg"); */
        background-position: center 43%;
    }

    .banner2 {
        font-family: "Batuphat Script";
        text-align: center;
        padding-top: 2vw;
        /* background-image: url("/Users/AustinStawowczyk/Documents/GitHub/Tired.com/photos/edits/IMG_6662 copy.png"); */
        background-position: center 43%;
    }

    .bar {
        font-family: "Batuphat Script";
        display: flex;
        flex-direction: row;
        justify-content: space-around;
        align-content: center;
    }

    .barButton {
        display: flex;
        justify-content: space-between;
        align-content: center;
    }

    .stack {
        font-family: "Batuphat Script";
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-content: space-around;
    }

    .stackButton {
        display: flex;
        justify-content: space-between;
        align-content: center;
    }

    .merchBar {
        display: flex;
        position: fixed;
        top: 0;
        bottom: 12;
        left: 0;
        right: 0;
        flex-direction: column;
        justify-content: center;
        align-content:center;
        background-image: url("/Users/AustinStawowczyk/Documents/GitHub/Tired.com/photos/edits/IMG_6662 copy.png");
        background-position: center 40%;
    }

    .merchFloor {
        display: flex;
        position: fixed;
        /* top: 12; */
        bottom: 0;
        left: 0;
        right: 0;
        flex-direction: row;
        justify-content: right;
        align-content:center;
        background-image: url("/Users/AustinStawowczyk/Documents/GitHub/Tired.com/photos/edits/IMG_6662 copy.png");
        background-position: center 75%;
    }

    /* .merchStore {
        margin: 5vw 3vw;
        display: grid;
        grid-auto-flow: row;
        /* grid-column-end: span 1vw;
        grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
        grid-template-rows: repeat(auto-fill, minmax(100px, 1fr));
        gap: 2vw;
    }

    .merchBox {
        margin: 0.5vw;
        padding: 1vw;
        display: flex;
        flex-direction: column;
        justify-content: center;
    } */

    .merchStore {
        margin: 5vw 3vw;
        display: grid;
        grid-auto-flow: row;
        grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
        grid-template-rows: 1fr 1fr 1fr 1fr 1fr;
        gap: 2vw;
    }

    .merchBox {
        margin: 0.5vw;
        padding: 1vw;
        display: flex;
        flex-direction: column;
        justify-content: center;
    }


    button {
        background-color: var(--background-color);
        color: var(--text-color);
        border: none;
        font-size: var(--text-size-normal);
    }

    summary {
        list-style-type: none;
        background-color: var(--background-color);
        color: var(--text-color);
        border: none;
        font-size: var(--text-size-normal);
    }

    summary:hover {
        color: var(--link-color-hover);
    }

    details {
        background-color: var(--background-color);
        color: var(--text-color);
        border: none;
        font-size: var(--text-size-normal);
        transition:  1s ease-in;
    }

    details[open] {
        animation: fadeIn 1.25s ease-in forwards;
    }


    /* TEXT PROPERTIES */
    :where(h1, h2, h3, h4, h5, h6) {
        opacity: 0.95;
    }

    h1 {
        font-weight: var(--text-weight-normal);
        font-size: var(--text-size-large);
        margin: 4vw 0 2vw;
    }

    h2 {
        font-weight: var(--text-weight-normal);
        font-size: var(--text-size-medium);
        line-height: var(--default-line-height);
        margin: 3vw 0 1.5vw;
    }

    h3 {
        font-weight: var(--text-weight-normal);
        font-size: 4.5vw;
        line-height: var(--default-line-height);
        margin: 1.4vw 0 0.7vw;
    }

    h4 {
        font-weight: var(--text-weight-normal);
        font-size: 3vw;
        line-height: var(--default-line-height);
    }

    h5 {
        font-weight: var(--text-weight-normal);
        font-size: 2.4vw;
        line-height: var(--default-line-height);
    }

    h6 {
        font-weight: var(--text-weight-light);
        font-size: var(--text-size-small);
        line-height: 20%;
    }

    p {
        margin: 0.3vw 15% 4vw;
        /* font-weight: var(--text-weight-normal); */
        font-size: var(--text-size-normal);
        line-height: var(--default-line-height);
    }

    /* TABLE PROPERTIES */
    table {
        font-size: var(--text-size-normal);
        margin: 0 10vw;
    }

    th {
        color: var(--link-color-hover);
        font-weight: 1000;
        line-height: 3;
    }

    tr {
    }

    td {
    }

    /* LIST PROPERTIES */
    li {
        list-style: disc;
        margin: 1.5vw 15vw 0;
        text-align: left;
        /* font-weight: var(--text-weight-light); */
        font-size: var(--text-size-small);
        line-height: var(--default-line-height);
    }

    /* FORM PROPERTIES */
    label {
        font-weight: var(--text-weight-normal);
        font-size: var(--text-size-small);
        line-height: var(--default-line-height);
    }

    input {
        background-color: #3e5f5f;
        border-style: none;
        flex-wrap: wrap;
        word-wrap: break-word;
        font-size: var(--text-size-small);
        font-weight: var(--text-weight-heavy);
        text-align: justify;
        width: 40%;
    }

    /* LINK PROPERTIES */
    a {
        text-decoration: none;
        font-weight: bold;
    }

    a:link {
        color: var(--text-color);
        filter: drop-shadow(1px 1px .5px rgb(180,180,180));    
    }

    /* a:visited {
        color: var(--link-color-visit);
    } */

    a:hover {
        color: var(--link-color-hover);
        animation: tilt-shaking 0.25s;
    }

    html {
        scroll-behavior: smooth;
    }